<template>
  <div class="mb-2">
    <el-input
      v-model="comment.comContent"
      :autosize="{ minRows: 2, maxRows: 5 }"
      type="textarea"
      placeholder="请输入评论"
    ></el-input>
    <el-button @click="addComment">回复</el-button>
  </div>

  <el-card v-for="(comment, index) in comments" :key="comment.noteComentId" class="mt-2">
    <el-row class="mb-1">
      <el-col :span="24" class="py-3 px-3">
        <img :src="comment.headUrl" style="height:3rem;width:4rem"/>
        {{ comment.authorName }}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">{{ comment.comComment }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">{{ index + 1 }} 楼 {{ comment.comTime }}</el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "NoteComment",
  props: {
    noteInfoId: Number,
  },
  data() {
    return {
      comments: [],
      comment: {
        comContent: null,
        noteInfoId: this.noteInfoId,
        replyAuthorId: 0,
      },
    };
  },
  mounted() {
    this.getComments();
  },
  methods: {
    //获取评论列表
    getComments() {
      this.$axios
        .get("/api/note/detail/comment?noteId=" + this.noteInfoId)
        .then((response) => {
          let data = response.data;
          if (data.code == 200) {
            this.comments = data.data;
          }
        });
    },
    //回复评论
    addComment() {
      this.$axios
        .post('/api/note/detail/comment/add', this.comment)
        .then((response) => {
          let data = response.data;
          alert(data.msg);
          if (data.code == 200) {
            this.getComments();
          } else if (data.code == 403) {
            this.$router.push("/login");
          }
        });
    },
  },
};
</script>

<style>
</style>